<template>
  <div class="shop">
    <van-icon name="arrow-left" @click="back()" />
    <div class="box1" >
      <div class="bgc">
        <img :src="imgurl" alt="" />
        <div class="top">
          <div class="shopname">{{name}}</div>
          <div><van-icon name="like-o" class="iconlove" /></div>
        </div>
      </div>
      <van-tree-select
        height="200vw"
        :items="items"
        :main-active-index.sync="active"
        
        @click-nav="onNavclick()"
      >
        <template #content>
          <ShoponelistCom  :xiaohong="currentIndex" :xiaoming="linkdata"  :v-if="active ===currentIndex" />         
        </template>
      </van-tree-select>
    </div>
    
    <!-- ---- -->
    <van-submit-bar :price="3050" @submit="onSubmit">
      <template #button>
        <van-button type="info">去结算</van-button>
      </template>
      <template #default>
        <van-badge :content="10" color="#1989fa">
          <van-icon name="cart-o" size="28px" color="#1989fa" @click="cart" />
        </van-badge>
      </template>
    </van-submit-bar>
    <!-- ----- -->
    <van-action-sheet v-model="show" title="已选商品">
      <div class="del"><van-icon name="delete-o" />清空</div>
      <!-- 弹出框内容 -->
      <div class="content">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #num>
            <van-stepper v-model="value" />
          </template>
        </van-card>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { fun_detail } from "@/api/index";
import ShoponelistCom from "@/components/ShoponelistCom";
import Vue from "vue";
import { Icon } from "vant";
import { TreeSelect } from "vant";
import { SubmitBar } from "vant";
import { Button } from "vant";
import { Badge } from "vant";
import { ActionSheet } from "vant";
import { Card } from "vant";
import { Stepper } from "vant";

Vue.use(Stepper);
Vue.use(Card);
Vue.use(ActionSheet);
Vue.use(Badge);
Vue.use(Button);
Vue.use(SubmitBar);
Vue.use(TreeSelect);
Vue.use(Icon);
export default {
  data() {
    return {
      active: 0,
      items: [],
      show: false,
      value: 1,
      id: "",
      name:'',
      imgurl:'',
      linkdata:'',
   currentIndex:''
    };
  },
  
  components: {
    ShoponelistCom,
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    fun_detail(this.id).then((res) => {
       let arr=res.data.shopinfo.taglist
       arr.forEach((v,i)=>{
            this.items.push({text:arr[i].name})
       })
       this.imgurl=res.data.shopinfo.info.picUrl
       this.linkdata=res.data.shopinfo
        console.log( this.linkdata);
    });
  },
  methods: {
    onSubmit() {},
    cart() {
      this.show = true;
    },
    back() {
      this.$router.go(-1);
    },
    onNavclick(){
      this.currentIndex=this.active
    console.log(this.currentIndex);
    }
  },
  
};
</script>

<style lang='scss' scoped>
.bgc {
  // background-color: pink;
  height: 11.1111rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;

  }
}
.top {
  display: flex;
  justify-content: space-between;
  padding: 0 1.1111rem;
  .shopname{
    position: absolute;
    z-index: 50;
    top: 3.8889rem;
    left:1.1111rem;
    font-weight: bold;
  }
  .iconlove{
    position: absolute;
    z-index: 50;
    right: 1.1111rem;
    top:3.8889rem;
     font-weight: bold;
  }
}
.content {
  padding: 16px 16px 160px;
}
.del {
  margin-left: 2.7778rem;
  font-size: 0.7222rem;
}
.btn {
  display: flex;
  div {
    margin-right: 0.5556rem;
    font-size: 0.8333rem;
  }
}
</style>